<style type="text/javascript">
.qq-uploader{ position:relative; width: 100%;}
.qq-upload-button{ display:block; width: 105px; padding: 7px 0; text-align:center; background:#880000; border-bottom:1px solid #ddd;color:#fff; }
.qq-upload-button-hover{ background:#cc0000; }
.qq-upload-button-focus{ outline:1px dotted black; }
.qq-upload-drop-area{ position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2; background:#FF9797; text-align:center; }
.qq-upload-drop-area span{    display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px;}
.qq-upload-drop-area-active{background:#FF7171;}
.qq-upload-list{margin:15px 35px; padding:0; list-style:disc;}
.qq-upload-list li{ margin:0; padding:0; line-height:15px; font-size:12px;}
.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text{    margin-right: 7px;}
.qq-upload-file{}
.qq-upload-spinner{display:inline-block; background: url("loading.gif"); width:15px; height:15px; vertical-align:text-bottom;}
.qq-upload-size,.qq-upload-cancel{font-size:11px;}
.qq-upload-failed-text{display:none;}
.qq-upload-fail .qq-upload-failed-text{display:inline;}
</style>
<script src="js/upload.js" type="text/javascript"></script>
<!--<script type="text/javascript">//<![CDATA[
function createUploader(){
  var uploader = new qq.FileUploader({
    element: document.getElementById('file-uploader-demo1'),
    action: 'do-nothing.htm',
    debug: true
  });
}

        // in your app create uploader as soon as the DOM is ready
        // don't wait for the window to load
        window.onload = createUploader;



//]]></script>//-->

<div id="file-uploader-demo1">
		<noscript>
			<p>Please enable JavaScript to use file uploader.</p>
			<!-- or put a simple form for upload here -->
		</noscript>
	</div> 


<div># of submited forms: <span id="nr">0</span></div>
<div>last submit response (generated by form action - index.php file):
</div>


<form name="pixboxnew" action="plugin/pixbox/cms/addpic.php" method="post">
Name/title/caption:<input type="text" name="pixbox"/>
<p/>
Width<input type="text" name="w" size="2" value="128"/>
Height<input type="text" name="h" size="2" value="128"/>
<input type="file" id="pic" name="pixfile" size="127" onchange="javascript:submit()" />
</form>


<?php/*
pixbox:
~~new:
  * upload files
    
 * specify dimesions, name, on/off
*/?>
<h2>~~preview</h2>
Een veelzijdige monoculair nachtkijker met krachtige ingebouwde infrarood illuminator en soft-touch bedieningsknoppen
Ideaal voor Nachtobservatie, watersport, jacht, nachtvissen, hiking, (wild)kamperen, survival, SAR, beveiliging, reality paint-ball en gebruik door overheidsdiensten.
<div class="pixbox" id="test" style="background-color:#FFF; display:block; width:20px;">
  <img style="float:left;" src="../res/sitegeist.png" alt=""/>
</div>
Een veelzijdige monoculair nachtkijker met krachtige ingebouwde infrarood illuminator en soft-touch bedieningsknoppen
Ideaal voor Nachtobservatie, watersport, jacht, nachtvissen, hiking, (wild)kamperen, survival, SAR, beveiliging, reality paint-ball en gebruik door overheidsdiensten.

<div id="pixdiv">
<img src="" alt="pixbox" id="pixbox" width="200" height="200" onclick="pixpop(this);"/>
<div id="pixlabel">label</div>
<script type="text/javascript">//<![CDATA[
//include'trunk/sitegeist/cms/plugin/pixbox/pixbox.php?p=blake';
function pixpop(el){
  if(window.popped){
    el.width=200;
    el.height=200;
    el.style.position='static';
    window.popped=false;
  }
  else{
    el.width=el.naturalWidth;
    el.height=el.naturalHeight;
    el.style.position='absolute';
    el.top=(windowheight()*0.5)-(el.naturalHeight*0.5);
    el.left=(windowwidth()*0.5)-(el.naturalWidth*0.5);;
    window.popped=true;
  }
}

function windowwidth(){
  var myWidth=0;
  if(typeof(window.innerWidth)=='number'){
    myWidth=window.innerWidth;     //Non-IE
  }
  else if(document.documentElement && document.documentElement.clientWidth){
    myWidth=document.documentElement.clientWidth; //IE 6+ in 'standards compliant mode'
  }
  else if(document.body && document.body.clientWidth){
    myWidth=document.body.clientWidth;     //IE 4 compatible
  }
  return myWidth;
}

function windowheight(){
  var myHeight=0;
  if(typeof(window.innerHeight)=='number'){
    myHeight=window.innerHeight;    //Non-IE
  }
  else if(document.documentElement && document.documentElement.clientHeight){
    myHeight=document.documentElement.clientHeight;    //IE 6+ in 'standards compliant mode'
  }
  else if(document.body && document.body.clientHeight){
    myHeight=document.body.clientHeight;     //IE 4 compatible
  }
  return myHeight;
}

function getpixbox(el){
  ajaxjs('plugin/pixbox/cms/show.php?js=1&pixbox='+el.innerHTML);
  ajax('pixboxlist','plugin/pixbox/cms/show.php?pixbox='+el.innerHTML);
  nextpic(); //function fetched thru ajax (runs too late)
}

function getScrollXY(){
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ){
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ){
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ){
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

function ajaxjs(cmd){
  if (window.XMLHttpRequest){ var xmlhttp=new XMLHttpRequest(); }
  else{ var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      eval(xmlhttp.responseText); }}
  xmlhttp.open("GET",cmd,true);
  xmlhttp.send();
}

function ajax(adiv,cmd){
  if (window.XMLHttpRequest){ var xmlhttp=new XMLHttpRequest(); }
  else{ var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById(adiv).innerHTML=xmlhttp.responseText; }}
  xmlhttp.open("GET",cmd,true);
  xmlhttp.send();
}
//]]></script>

<div id="pixboxlist"></div>
</div>

